<script setup>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import {
  getPropertyList,
  deleteProperty,
  getPropertyDetail
} from '@/api/staging and property/property'
import { ref, onMounted } from 'vue'
import { Modal, message } from 'ant-design-vue'
import addBill from './addBill.vue'

//  获取物业费管理数据列表
let dataSource = ref([])
const total = ref(null)
const listForm = ref({
  page: 1, // 当前页
  pageSize: 10, // 每页显示条数
  enterpriseName: '' // 企业名称
})

const isShow = ref(false) //  是否显示账单详情弹窗
//   获取物业费管理数据列表
const getList = async (listForm) => {
  const res = await getPropertyList(listForm)
  console.log(res.data.rows)
  dataSource.value = res.data.rows
  total.value = res.data.total
}
//   分页管理
const onChange = (page, pageSize) => {
  listForm.value.page = page
  listForm.value.pageSize = pageSize
  getList(listForm.value)
}
//   表格列
const columns = [
  { title: '序号', dataIndex: 'index', key: 'index' },
  { title: '账单编号', dataIndex: 'billNumber', key: 'billNumber' },
  { title: '企业名称', dataIndex: 'enterpriseName', key: 'enterpriseName' },
  { title: '租赁楼宇', dataIndex: 'buildingName', key: 'buildingName' },
  { title: '物业费(元/m²)', dataIndex: 'propertyFeePrice', key: 'propertyFeePrice' },
  { title: '账单金额(元)', dataIndex: 'paymentAmount', key: 'paymentAmount' },
  { title: '续费时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '操作', dataIndex: 'action' }
]
//   搜索
const serach = () => {
  getList(listForm.value)
}
//  添加账单弹窗
const showDialog = ref(false)

// 添加账单
const handleAdd = () => {
  showDialog.value = true
}
//   打开账单详情弹窗
let detail = ref({})
const openDetails = async (id) => {
  // console.log(id)
  const { data } = await getPropertyDetail(id)
  detail.value = data
  isShow.value = true
}
//   挂载完就调用
onMounted(() => {
  getList()
})

//删除账单信息
const rentingOut = (id) => {
  Modal.confirm({
    content: '是否确认删除当前账单?',
    async onOk() {
      await deleteProperty(id)
      message.success('删除成功')
    }
  })
}
</script>
<template>
  <div class="content">
    <div class="t-content">
      <a-config-provider :locale="zh_CN">
        <a-form>
          <a-row>
            <a-col :span="6" style="margin-right: 20px">
              <a-form-item label="企业名称：">
                <a-input
                  placeholder="请输入企业名称"
                  v-model:value="listForm.enterpriseName"
                  style="border-radius: 5px"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item label="缴费时间：">
                <a-range-picker style="border-radius: 5px"></a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item>
                <a-button @click="serach">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-config-provider>
      <a-divider style="margin: 0px" />
      <div class="b-content">
        <a-button class="editable-add-btn" @click="handleAdd">添加账单</a-button>
        <a-table :pagination="false" :data-source="dataSource" :columns="columns">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === 'index'">
              {{ (listForm.page - 1) * listForm.pageSize + index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'action'">
              <span class="span" @click="openDetails(record.id)">查看</span>
              <span class="span" @click="rentingOut(record.id)">删除</span>
            </template>
          </template>
        </a-table>
        <!-- 分页---------- -->
        <div class="pagination">
          <a-config-provider :locale="zh_CN">
            <a-pagination
              size="small"
              v-model:current="listForm.page"
              v-model:page-size="listForm.pageSize"
              :total="total"
              @change="onChange"
              :pageSizeOptions="['10', '20', '30', '40']"
              :show-total="(total) => `共 ${total} 条`"
              show-size-changer
              show-quick-jumper
            />
          </a-config-provider>
        </div>
      </div>
    </div>
    <a-modal title="查看账单" :visible="isShow" :footer="null">
      <div class="contentIsShow" labelAlign="right">
        <a-row>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 150px; display: flex">
            <p>租户名称：</p>
            <span>{{ detail.enterpriseName }}</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 150px; display: flex">
            <p>租赁楼宇：</p>
            <span>{{ detail.buildingName }}</span>
          </a-col>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 150px; display: flex">
            <p>续费周期：</p>
            <span>{{ detail.startTime }}至{{ detail.endTime }}</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 120px; display: flex">
            <p>物业费(元/m²)：</p>
            <span>{{ detail.propertyFeePrice }}</span>
          </a-col>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 130px; display: flex">
            <p>账单金额(元)：</p>
            <span>{{ detail.paymentAmount }}</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 150px; display: flex">
            <p>支付方式：</p>
            <span v-if="detail.paymentMethod === 1">微信</span>
            <span v-if="detail.paymentMethod === 2">支付宝</span>
            <span v-if="detail.paymentMethod === 3">现金</span>
          </a-col>
          <a-col :span="24" style="margin-bottom: 15px; margin-left: 150px; display: flex">
            <p>缴费时间：</p>
            <span>{{ detail.createTime }}</span>
          </a-col>
        </a-row>
      </div>
      <a-row type="flex" justify="end">
        <a-space>
          <a-button style="border-radius: 10px" @click="isShow = false">取消</a-button>
          <a-button style="border-radius: 10px" type="primary" @click="isShow = false"
            >确认</a-button
          >
        </a-space>
      </a-row>
    </a-modal>
    <addBill v-model:showDialog="showDialog" @addSuccess="getList"></addBill>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 20px;
  .t-content {
    background-color: #fff;
    padding: 20px;
    .ant-btn {
      background-color: #4770ff;
      color: #fff;
      border-radius: 5px;
      margin-left: 15px;
    }
  }
  .b-content {
    .editable-add-btn {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
    margin-top: 20px;
  }
  .span {
    margin-right: 3px;
    color: #4770ff;
    cursor: pointer;
  }
  .contentIsShow {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .ant-modal-body {
    margin-left: 150px;
  }
}
</style>
